* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
// body {
// 	font-size: 16px;
// }
.detail-all {
	width: 100%;
	// 1顶部
	.detail-title {
		width: 100%;
		height: 20.9375rem;
		background: url(../img/title-background.png) no-repeat;
		background-size: cover;
		padding: 1.25rem;
		// 1
		.detail-header {
			width: 100%;
			height: 8.625rem;
			display: flex;
			justify-content: space-between;
			.title-img {
				width: 6.5rem;
				height: 8.625rem;			
				border-radius: .5rem;
				overflow: hidden;
				img {
					width: 6.5rem;
				}
			}
			.title-explain {
				width: calc(100% - 7.2rem);
				height: 8.625rem;
				position: relative;
				&>p:nth-of-type(1) {
					color: #ffff;
					font-size: 1.0625rem;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				&>p:nth-of-type(2) {
					position: absolute;
					bottom: 0;
					color: #ffff;
					font-size: .875rem;
				}
			}
		}
		// 2
		.detail-time-place {
			width: 100%;
			height: 3.9375rem;
			background-image: linear-gradient(70deg,rgba(28,27,54,.73),rgba(21,22,51,.73));
			margin-top: .625rem;
			border-radius: .5rem;
			color: #ffff;
			padding: 13px 8px 13px 12px;
			// font-size: ;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			&>p:nth-of-type(1) {
				font-size: .875rem;
				font-weight: lighter;
			}
			&>p:nth-of-type(2) {
				font-size: .8125rem;
			}
			img {
				width: 1.5rem;
				position: absolute;
				top: 50%;
				right: .5rem;
				transform: translate(-50% ,-50%);
			}
		}
		// 3
		.detail-service {
			width: 100%;
			display: flex;
			margin-top: .8125rem;
			&>div {
				img {
					margin-left: .625rem;
					width: .75rem;
					vertical-align:middle
				}
				span {
					color: #f1cba0;
					font-size: .75rem;
					vertical-align:middle
				}
			}

		}
		// 4
		.detail-food {
			width: 100%;
			margin-top: 1rem;
			ul {
				list-style: none;
				display: flex;
				justify-content: space-between;
				li {
					width: 48%;
					background-color: rgba(212, 219, 255, 0.1);
					height: 2.1875rem;
					border-radius: .3125rem;
					text-align: center;
					img {
						width: 1rem;
						vertical-align: middle;
					}
					span {
						vertical-align: middle;
						color: #ffff;
						font-size: .8125rem;
						line-height: 2.1875rem;
					}
				}
			}
		}
	}
	// 2centent 
	.centent-all {
		width: 100%;
		padding: 0 .9375rem;
		// background-color: #f0f0f0;
		// 1
		.banner-img {
			margin-top: .9375rem;
			width: 100%;
			background: #ffff;
			img {
				width: 100%;
			}
		}
		// 2
		.centent-headline {
			width: 100%;
			// background-color: #fff;
			&>p {
				margin-top: .8125rem;
				color: #333;
				font-size: 1.0625rem;
				font-weight: bold;
			}
			&>div:nth-of-type(1) {
				width: 100%;
				padding: .5rem 0;
				&>img {
					width: 100%;
				}
				&>p {
					color: #666;
					font-size: .875rem;
					line-height: 1.8;
				}
			}
			// 购票须知
			&>div:nth-of-type(2) {
				border-top: .1rem solid #f0f0f0;
				border-bottom: .1rem solid #f0f0f0;
				&>div {
					padding: .8125rem 0;
					p {
						font-size: 1.0625rem;
						font-weight: bold;
						color: #333;
					}
				}
				&>p {
					color: #333;
					font-size: .875rem;
					line-height: 1.8;
					span {
						font-weight: 700;
						font-size: .9rem;
					}
				}
			}
			// 为您推荐 
			&>div:nth-of-type(3) {
				width: 100%;
				&>div:nth-of-type(1) {
					padding: .8125rem 0;
					p {
						color: #333;
						font-size: 1.0625rem;
						font-weight: bold;
					}
				}
				&>ul {
					list-style: none;
					li {
						margin: .8125rem 0;
						width: 100%;
						display: flex;
						justify-content: space-between;
						&>div:nth-of-type(1) {
							width: 6.25rem;
							height: 8.4375rem;
							overflow: hidden;
							border-radius: .375rem;
							img {
								width: 100%;
							}
						}
						&>div:nth-of-type(2) {
							width: calc(100% - 6.7rem);
							position: relative;
							&>p:nth-of-type(1) {
								font-size: 1rem;
								color: #111;
								overflow: hidden;
								-webkit-box-orient: vertical;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								font-weight: 700;
								line-height: 1.5625rem;
							}
							&>div:nth-of-type(1) {
								display: flex;
								margin: .3125rem 0;
								&>p {
									margin: 0 .3125rem 0 0;
									color: #ff913d;
									font-size: .75rem;
									font-weight: bold;
								}
							}
							&>p:nth-of-type(2) {
								color: #888;
								font-size: .75rem;
								margin-top: .375rem;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								display: -webkit-box;
							}
							&>p:nth-of-type(3) {
								color: #888;
								font-size: .75rem;
								margin: .25rem 0 0 0;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
							&>p:nth-of-type(4) {
								width: 100%;
								position: absolute;
								bottom: 0;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: .8125rem;
								&>span:nth-of-type(1) {
									display: inline-block;
									&>span:nth-of-type(1) {
										display: inline-block;
										padding: .125rem;
										color: #FF7F8E;
										background-color: #FFF1EF;
										border-radius: .4rem;
									}
									&>span:nth-of-type(2) {
										color: #000;
									}
								}
								&>span:nth-of-type(2) {
									display: inline-block;
									text-align: right;
									color: #ccc;
								}
							}
						}
					}
				}
				&>div:nth-of-type(2) {
					width: 100%;
					height: 7.9375rem;
					position: relative;
					&>div {
						width: 6.875rem;
						height: 1.875rem;
						border-radius: .95rem;
						border: 1px solid #ccc;
						color: #f03d37;
						font-size: .75rem;
						line-height: 1.8rem;
						margin: auto;
						text-align: center;
					}
					img {
						position: absolute;
						width: 5rem;
						bottom: 3rem;
						left: 50%;
						transform: translate(-50% ,-50%);
					}
				}
			}
			// 底部
			&>div:nth-of-type(4) {
				width: 100%;
				height: 3.5rem;
				position: fixed;
				bottom: 0;
				left: 0;
				background-image: linear-gradient(-180deg,hsla(0,0%,100%,0) 7%,#fff 69%);
				&>div {
					width: 20rem;
					margin: auto;
					height: 2.875rem;
					border-radius: 1.5rem;
					background: #f03d37;
					text-align: center;
					line-height: 2.87rem;
					color: #fff;
					/* &::-webkit-scrollbar {
						display: none;
					} */
				}
			}
		}
	}
}